<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="35%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">禁言</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <el-radio-group v-model="numberValidateForm.radio">
                    <el-radio style="width: 15%; margin-top:5%;" :label="item.id" v-for="item in radioList" :key="item.id">{{item.name}}</el-radio>
                </el-radio-group>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 40px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "numberOfvisits",
  data() {
    return {
      centerDialogVisible: true,  
      numberValidateForm: {
        radio: ''
      },
      radioList: [
        { id: '1', name: '禁言1天'},
        { id: '2', name: '禁言3天'},
        { id: '3', name: '禁言7天'},
        { id: '4', name: '禁言15天'},
        { id: '5', name: '禁言30天'},
        { id: '6', name: '永久禁言'},
        { id: '7', name: '取消禁言'}
      ]
    }
  },
  methods: {
    // 关闭弹框；
    closeforbiddenWords(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeforbiddenWords');
    },
    // 确定
    submitForm() {
      if (this.numberValidateForm.radio === '') {
        this.$message.warning('你还没有选择禁言时间，不能确定！');
      }else{
        if (this.radioList && this.radioList.length > 0) {
          this.radioList.forEach( item =>{
            if (this.numberValidateForm.radio === item.id) {
              this.numberValidateForm.radioName = item.name;
            }
          })
        }
        this.$emit('emitforbiddenWords',this.numberValidateForm)
        this.$message.success('禁言成功！');
        this.close()
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-left: 10%;
    .integral_content_top{
       margin-top: -20px;
       width: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
    }
}
</style>
